<template>
  <div>
    <TypeNav />
    <Toolbar />
    <Main 
    :searchParams = "this.searchParams"
    />
    <!-- <h1>{{$route.query.k}}============{{k}}</h1> -->
    <!-- <h1>{{$route.params.keyword}}============{{keyword}}</h1> -->
  </div>
</template>

<script>
import Toolbar from "./Toolbar";
import Main from "./Main";
import { mapState } from "vuex";
export default {
  name: "Search",
  data() {
    return {
      // 带给服务器的参数
      searchParams: {
        category1Id: "",
        category2Id: "",
        category3Id: "",
        // 分类名字
        categoryName: "",
        // 关键字
        keyword: "",
        // 排序 :初始状态应该是降序
        order: "1:desc",
        // 分页器，代表当前第几页
        pageNo: 1,
        // 一页展示多少条数据
        pageSize: 10,
        props: [],
        trademark: "",
      },
    };
  },
  components: {
    Toolbar,
    Main,
  },
  beforeMount() {
    // this.searchParams.categoryName = this.$route.query.categoryName;
    // this.searchParams.category1Id = this.$route.query.category1Id;
    // this.searchParams.category2Id = this.$route.query.category2Id;
    // this.searchParams.category3Id = this.$route.query.category3Id;
    // this.searchParams.keyword = this.$route.params.keyword;
    // 利用Object.assign:ES6新增语法，合并对象
    Object.assign(this.searchParams,this.$route.query,this.$route.params)
  },
  mounted() {
    // 派发action不能放在这里
    this.$store.dispatch("getSearchList", this.searchParams);
    // 绑定事件总线
    this.$bus.$on('changeName',this.changeName)
    this.$bus.$on('changeKeyword',this.changeKeyword)
    this.$bus.$on('trademarkInfo',this.trademarkInfo)
    this.$bus.$on('changeTrademark',this.changeTrademark)
    this.$bus.$on('attrInfo',this.attrInfo)
  },
  beforeDestroy() {//解绑
    this.$bus.$off('changeName','changeKeyword','trademarkInfo','changeTrademark')
  },
  methods: {
    // 向服务器发请求获取search模块数据（根据参数不同返回不同的数据进行展示）
    // 吧这次请求封装为一个函数：当你需要的时候调用即可
    getData() {
      this.$store.dispatch("getSearchList", this.searchParams);
    },


    // 改变面包屑
    changeName(data){
      this.searchParams.categoryName = data
      this.searchParams.category1Id= undefined,
        this.searchParams.category2Id= undefined,
        this.searchParams.category3Id= undefined,
      this.$store.dispatch("getSearchList", this.searchParams);
      // 路由跳转 自己跳自己
      if(this.$route.params){
      this.$router.push({name:"search",params:this.$route.params}) 
      }
    },


    // 改变关键字的函数
    changeKeyword(data){
      // 给服务器带的参数searchParams的keyword置空
      this.searchParams.keyword=data
      // 再次发送请求
      this.$store.dispatch("getSearchList",this.searchParams);
      // 把header组件中的keyword数据清除
      this.$bus.$emit('clear');
      // 路由跳转
      if(this.$route.query){
        this.$router.push({name:"search",query:this.$route.query})
      }
    },
        // 改变trademark
          changeTrademark(data){
            // 把服务器的trademark滞空
            this.searchParams.trademark = data
             // 再次发送请求
        this.$store.dispatch("getSearchList",this.searchParams);
          },

     // 事件的回调
        trademarkInfo(trademark){
            this.searchParams.trademark = `${trademark.tmId}:${trademark.tmName}`
            this.$store.dispatch("getSearchList", this.searchParams);
        },

      // 平台售卖属性值的点击事件
      attrInfo(attr,attrValue){
        console.log(attr,attrValue);
           // 整理参数
        let props = `${attr.attrId}:${attrValue}:${attr.attrName}`
        if(this.searchParams.props.indexOf(props)==-1){
          this.searchParams.props.push(props)
        }
        // 发送请求
        this.$store.dispatch("getSearchList",this.searchParams)
      }

  },
  computed: {
    ...mapState({
      searchList: (state) => {
        return state.search.searchList;
      },
    }),
  },
  // 数据监听
  watch:{
     // 当路由发生改变时发送请求
    $route(newValue,oldValue){
    Object.assign(this.searchParams,this.$route.query,this.$route.params)
      this.$store.dispatch("getSearchList", this.searchParams);
    // 每次请求完毕，应该把  categoryId 的属性值清空 不然会滞留影响操作
        console.log(this.searchParams);
        this.searchParams.category1Id= "",
        this.searchParams.category2Id= "",
        this.searchParams.category3Id= ""
        // this.$route.params.keyword=""
  }
    
  }
};
</script>

<style>
</style>